<template>
	<view class="page">
		<view class="token-list">
			<view class="token-list-li" v-for="(k,index) in data.list">
				<view class="token-info">
					<view class="token-info-header">
						<wd-tag custom-class="space" type="success">有效</wd-tag>
						登录密钥
					</view>
					<view class="token-info-value">
						najsdnjasndjansdnajsdnjandjsnakjsndjkansdj
					</view>
				</view>
				<view class="token-options">
					<view class="token-date-info">
						<text>有效期：23点53分</text>
					</view>
					<view class="token-options-li">
						<text @click="ClickDelete">删除</text>
					</view>
					<view class="token-options-li">
						<text @click="ClickCopy">复制</text>
					</view>
					<view class="token-options-li">
						<text @click="ClickEdit">修改</text>
					</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script setup>
	import overallRequest from "@/utool/http/http.js"
	import {
		reactive
	} from "vue"
	import {
		onReady,
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"

	const data = reactive({
		user:null,
		page: null,
		pages: null,
		limit: null,
		total: null,
		list: []
	})



	// 滚动页面底部
	onReachBottom(() => {
		let page = data.page
		let pages = data.pages
		if (page >= pages) {
			return
		} else {
			data.page++
			GetList()
		}
	})
	// token列表
	function GetList() {
		let url = `/manage/getUserTokenList?user=${data.user}`
		overallRequest(url).then(res => {
			let {
				page,
				pages,
				limit,
				total,
				list
			} = res.data
			data.page = page
			data.pages = pages
			data.limit = limit
			data.total = total
			data.list.push(...list)
			console.log(res);
		}).catch(err => {
			console.log(err);
		})
	}

	// 点击销毁密钥
	function ClickDestructionToken() {

	}
	// 点击删除密钥
	function ClickDelteToken() {

	}


	// 销毁密钥
	function DestructionToken() {
		let url = ""
		overallRequest(url).then(res => {
			console.log(res);
		}).catch(err => {
			console.log(err);
		})
	}

	// 删除密钥
	function DelteToken() {
		let url = ""
		overallRequest(url).then(res => {
			console.log(res);
		}).catch(err => {
			console.log(err);
		})
	}
	onLoad((query)=>{
		let {user} = query 
		data.user = user 
		GetList()
	})
</script>

<style scoped>
	.page {
		padding-top: 0rpx;
		padding-bottom: 30rpx;
		margin: 0;
		box-sizing: border-box;
	}

	.token-list {
		display: flex;
		flex-direction: column;
		background: #c3c3c344;
		padding: 0rpx 0rpx;
	}

	.token-list-li {
		padding: 20rpx 28rpx;
		background: white;
		padding-bottom: 28rpx;
		border-bottom: 1rpx solid #c3c3c344;
	}

	.token-info-value {
		color: gray;
		margin: 28rpx 0rpx;
		font-size: 24rpx;
		background: #c3c3c344;
		padding: 8rpx 13rpx;
		margin-top: 14rpx;
	}

	.token-options {
		display: flex;
		justify-content: flex-end;
		gap: 18rpx;
	}

	.token-date-info {
		flex: 1;
		font-size: 26rpx;
		color: gray;
		display: flex;
		align-items: center;
	}

	.token-options-li {
		display: flex;
		gap: 15rpx;
		font-size: 24rpx;
		color: gray;
	}
</style>